<template>
  <div class="out">
    <div v-for="(item,index) in newData" :key="index" class="inner">
      <div class="font">{{item.CN}}</div>
      <div class="inp">
        <el-input size="mini" v-model="newData[index].value" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <!-- <div class="innerbtn">
         <el-button type="primary" size="mini" @click="searchCondition">搜索</el-button>
    </div> -->
  </div>
</template>
<script>
export default {
  props: ['searchData'],
  data() {
    return {
      //深拷贝的searchData
      newData: [],
    }
  },
  created() {
    this.newData = JSON.parse(JSON.stringify(this.searchData)) //深拷贝
  },
  watch: {
    newData: {
      handler(newValue, oldValue) {
        this.$emit('searchCallBack', this.newData)
      },
      deep: true,
    },
  },
  // methods:{
  //     searchCondition(){//返回数据给父组件查询
  //         this.$emit("searchCallBack",this.newData)
  //     }
  // }
}
</script>
<style lang="scss" scoped>
.out {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 20px 10px;
  .inner {
    width: 25%;
    // display: flex;
    padding: 7.5px 15px;
    .font {
      width: 70px;
      // background: forestgreen;
    }
    .inp {
      flex: 100;
      // background: yellowgreen;
    }
  }
  .innerbtn {
    width: 25%;
    padding: 7.5px 20px;
  }
}
</style>
